"use strict";
import * as React from 'react';
const { View, FlatList, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import Line from "../../component/Line";
import MyText from "../../component/MyText";
import Avatar from "../../component/Avatar";
import MyIcon from "../../component/icon";
import { groupStyles } from "../../assets/styles/groups";
import Colors from "../../assets/styles/Colors";
class AllGroupsPage extends React.Component {
    constructor() {
        super(...arguments);
        this.onJoinGroup = (item) => {
            const group = item.group;
            this.props.dispatch({
                type: 'auth/joinGroup',
                payload: {
                    groupId: group.id
                }
            });
        };
        this.onEndReached = () => {
            if (!this.props.auth.notInGroupsDTOS.last) {
                this.props.dispatch({
                    type: 'auth/fetchGroupList',
                    payload: { pi: this.props.auth.notInGroupsDTOS.number + 2, ps: 5 }
                });
            }
        };
        this.renderItem = ({ item, index }) => {
            const avatarProps = {
                borderWidth: 1,
                borderColor: '#fff',
                size: 35,
            };
            const group = item;
            return (<View style={[commonStyles.flexColumn, groupStyles.listItem]} key={index}>
                <View style={commonStyles.flexRow}>
                    <Avatar source={{ uri: group.group.mainPic }} circle={false} size={autoSize(85)}/>
                    <View style={[commonStyles.flexColumn, commonStyles.flex1, groupStyles.content]}>
                        <MyText numberOfLines={1} fontSize={14} color={Colors.Title} fontWeight={'500'}>{group.group.groupName}</MyText>
                        <MyText numberOfLines={2} style={{ marginTop: 5 }} fontSize={14} color={Colors.Title}>{group.group.description}</MyText>
                    </View>
                </View>
                <View>
                    <View style={commonStyles.flexRow}>
                        <View style={[commonStyles.flexRow, commonStyles.flex1, groupStyles.content]}>
                            <Avatar {...avatarProps} content={`+${group.users.length}`} style={{ zIndex: 10 }}/>
                            {group.users.map((u, i) => {
                if (i > 3)
                    return null;
                return <Avatar {...avatarProps} key={i} style={[groupStyles.member, {
                        zIndex: 8 - i * 2,
                        backgroundColor: '#DC6451'
                    }]}/>;
            })}
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        </View>
                        <TouchableOpacity onPress={this.onJoinGroup.bind(this, item)}>
                            <View style={[commonStyles.flexRow, groupStyles.joinBtn, item.is_join ? groupStyles.isJoin : null]}>
                                <MyIcon name={!item.is_join ? 'icon-jia1' : 'icon-gou'} color={item.is_join ? '#999' : '#000'} size={15}/>
                                <MyText fontSize={15} style={{ marginLeft: 5 }} color={item.is_join ? '#999' : '#000'}>{'加入'}</MyText>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>);
        };
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'auth/fetchGroupList',
            payload: { pi: 1, ps: 5 }
        });
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} rightButton={{ title: '已完成', tintColor: '#fff', handler: Actions.pop }} title={{ title: '所有群组', tintColor: '#fff' }}/>
                <FlatList data={this.props.auth.notInGroupsDTOS.content} renderItem={this.renderItem} keyExtractor={(item, index) => index} ItemSeparatorComponent={() => <Line height={10}/>} onEndReached={this.onEndReached} extraData={this.state}/>
            </View>);
    }
}
export default connect(({ auth }) => ({ auth }))(AllGroupsPage);
